<template>
    <ul>
        <li>
            <div>
                <input type="checkbox" v-model="isAllChecked" @change="handleAllChange" />
                <span>{{ isAllChecked ? '反选' : '全选' }}</span>
            </div>
        </li>
        <li v-for="(item, index) in dataList" :key="item.id">
            <input type="checkbox" v-model="checkList" :value="item" @change="handleItemChange" />
            <img :src="item.img" />
            <div>
                <p v-text="item.title"></p>
                <p>价格：{{ item.price }}</p>
            </div>
            <div>
                <!-- 通过禁用button来控制上限和下限 -->
                <button @click="item.number--" :disabled="item.number === 1">
                    -
                </button>
                {{ item.number }}
                <button @click="item.number++" :disabled="item.number === item.maxNumber">
                    +
                </button>
            </div>
            <button @click="handleDel(index, item.id)">删除</button>
        </li>
        <li>
            <!-- 只要函数中所依赖的响应式数据在变化，那么函数会重新执行 -->
            总金额：{{ sum() }}
        </li>
    </ul>
</template>
<script setup>
import { ref, reactive } from 'vue'
const dataList = reactive([
    {
        id: 1,
        title: '商品1',
        price: 10,
        number: 1,
        img: 'https://img.alicdn.com/imgextra/i1/2214139834336/O1CN01YARYay1htwDZFHmWO_!!2214139834336-0-alimamacc.jpg_580x580q90.jpg_.webp',
        maxNumber: 5
    },
    {
        id: 2,
        title: '商品2',
        price: 20,
        number: 1,
        img: 'https://img.alicdn.com/imgextra/i2/3292659455/O1CN01We5hHQ2JiRjkEwrpv_!!0-saturn_solar.jpg_580x580q90.jpg_.webp',
        maxNumber: 5
    },
    {
        id: 3,
        title: '商品3',
        price: 10,
        number: 1,
        img: 'https://img.alicdn.com/imgextra/i4/96565893/O1CN01wFsazE1tP2qwzYlPM_!!0-saturn_solar.jpg_580x580q90.jpg_.webp',
        maxNumber: 5
    }
])
// 勾选上的商品数组
// 如果数组是绑定给checkbox的v-model，只能用ref函数定义这个数组
const checkList = ref([])
// 希望这个数据记录当前全选框是否被选中
const isAllChecked = ref(false)

/**
 * 计算总金额
 */
const sum = () => {
    // let total = 0
    // checkList.value.forEach(item => {
    //     total += item.price * item.number
    // })
    // return total
    return checkList.value.reduce(
        (total, item) => total += item.price * item.number,
        0
    )
}

const handleDel = (index, id) => {
    // 原始的商品数组中删除该条商品
    dataList.splice(index, 1)
    // 要重新计算总价格，从checkList中删除该条商品
    // 由于dataList和checkList中元素排布的顺序可能不一致
    // checkList.value.splice(index, 1)
    checkList.value = checkList.value.filter(item => item.id != id)
    // 重新计算isAllChecked
    handleItemChange()
}

const handleItemChange = () => {
    // 两个数组都是空的时候，isAllChecked应该是false
    // if(dataList.length === 0) {
    //     isAllChecked.value = false
    //     return
    // }
    // 每一项商品的复选框在勾选/取消时，重新计算isAllChecked
    isAllChecked.value = dataList.length !== 0
        && dataList.length === checkList.value.length
}

const handleAllChange = () => {
    // 怎么区分是勾上/取消，通过当前isAllChecked的值
    // if(isAllChecked.value === true) {
    //     console.log('全选')
    //     // 让checkList等于dataList
    //     checkList.value = dataList
    // } else{
    //     console.log('反选')
    //     // 让checkList等于[]
    //     checkList.value = []
    // }
    checkList.value = isAllChecked.value ? dataList : []
}

</script>
<style scoped>
/* 这里的通配符能不能选中body */
* {
    margin: 0;
    padding: 0;
}

li {
    display: flex;
    /* 弹性布局中子项在主轴方向上的对齐方式 */
    /* 自动分散对齐 */
    justify-content: space-between;
    /* 子项在交叉轴，也就纵轴方向上的对齐方式 */
    align-items: center;
    border: 1px solid #CCCCCC;
    padding: 10px;
}

img {
    width: 80px;
}
</style>